<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UC-QA-001：语音问答测验原型</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: #fff;
            padding: 16px 24px;
            border-bottom: 1px solid #e8e8e8;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }
        
        .breadcrumb a {
            color: #1890ff;
            text-decoration: none;
        }
        
        .main-content {
            padding: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .quiz-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .quiz-header {
            background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
            color: #fff;
            padding: 24px;
            text-align: center;
        }
        
        .quiz-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .quiz-subtitle {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .quiz-progress {
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .progress-bar {
            flex: 1;
            height: 8px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: #fff;
            border-radius: 4px;
            transition: width 0.3s;
        }
        
        .progress-text {
            font-size: 12px;
            font-weight: 500;
        }
        
        .quiz-content {
            padding: 32px;
        }
        
        .question-section {
            margin-bottom: 32px;
        }
        
        .question-number {
            display: inline-block;
            background: #e6f7ff;
            color: #1890ff;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 16px;
        }
        
        .question-text {
            font-size: 18px;
            font-weight: 500;
            color: #333;
            margin-bottom: 24px;
            line-height: 1.6;
        }
        
        .question-audio {
            background: #f8f9fa;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .audio-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #1890ff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .audio-icon:hover {
            background: #40a9ff;
            transform: scale(1.05);
        }
        
        .audio-icon.recording {
            background: #ff4d4f;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .audio-info {
            flex: 1;
        }
        
        .audio-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        
        .audio-status {
            font-size: 12px;
            color: #666;
        }
        
        .audio-duration {
            font-size: 12px;
            color: #999;
        }
        
        .answer-section {
            margin-bottom: 32px;
        }
        
        .answer-label {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 16px;
        }
        
        .answer-input {
            width: 100%;
            min-height: 120px;
            padding: 16px;
            border: 2px solid #e8e8e8;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.6;
            resize: vertical;
            transition: border-color 0.3s;
        }
        
        .answer-input:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
        }
        
        .voice-input {
            background: #f8f9fa;
            border: 2px dashed #d9d9d9;
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .voice-input:hover {
            border-color: #1890ff;
            background: #f0f8ff;
        }
        
        .voice-input.recording {
            border-color: #ff4d4f;
            background: #fff2f0;
        }
        
        .voice-icon {
            font-size: 48px;
            margin-bottom: 12px;
            color: #1890ff;
        }
        
        .voice-input.recording .voice-icon {
            color: #ff4d4f;
            animation: pulse 1.5s infinite;
        }
        
        .voice-text {
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
        }
        
        .voice-hint {
            font-size: 12px;
            color: #666;
        }
        
        .voice-result {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            border-radius: 6px;
            padding: 12px;
            margin-top: 12px;
            font-size: 14px;
            color: #52c41a;
        }
        
        .quiz-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 24px;
            border-top: 1px solid #e8e8e8;
        }
        
        .btn {
            padding: 12px 24px;
            border: 1px solid;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-primary:disabled {
            background: #d9d9d9;
            border-color: #d9d9d9;
            color: #999;
            cursor: not-allowed;
        }
        
        .btn-default {
            background: #fff;
            border-color: #d9d9d9;
            color: #333;
        }
        
        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .btn-success {
            background: #52c41a;
            border-color: #52c41a;
            color: #fff;
        }
        
        .btn-success:hover {
            background: #73d13d;
            border-color: #73d13d;
        }
        
        .timer {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #666;
        }
        
        .timer-icon {
            font-size: 16px;
        }
        
        .timer-text {
            font-weight: 500;
        }
        
        .timer.warning {
            color: #faad14;
        }
        
        .timer.danger {
            color: #ff4d4f;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: #fff;
            border-radius: 12px;
            padding: 32px;
            max-width: 500px;
            width: 90%;
            text-align: center;
        }
        
        .modal-icon {
            font-size: 64px;
            margin-bottom: 16px;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .modal-text {
            font-size: 14px;
            color: #666;
            margin-bottom: 24px;
            line-height: 1.6;
        }
        
        .modal-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        
        .result-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 24px;
        }
        
        .result-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }
        
        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #e8e8e8;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-label {
            font-size: 14px;
            color: #666;
        }
        
        .result-value {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        
        .result-value.success {
            color: #52c41a;
        }
        
        .result-value.warning {
            color: #faad14;
        }
        
        .result-value.danger {
            color: #ff4d4f;
        }
        
        @media (max-width: 768px) {
            .quiz-content {
                padding: 20px;
            }
            
            .quiz-actions {
                flex-direction: column;
                gap: 12px;
            }
            
            .modal-actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <div class="header">
        <div class="breadcrumb">
            <a href="#">首页</a> > <a href="#">学习测验</a> > 语音问答测验
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <div class="quiz-container">
            <!-- 测验头部 -->
            <div class="quiz-header">
                <div class="quiz-title">语音问答测验</div>
                <div class="quiz-subtitle">基础操作培训 - 第3章：完成检查</div>
                <div class="quiz-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 60%;"></div>
                    </div>
                    <div class="progress-text">3/5 题</div>
                </div>
            </div>

            <!-- 测验内容 -->
            <div class="quiz-content">
                <!-- 问题区域 -->
                <div class="question-section">
                    <div class="question-number">第3题</div>
                    <div class="question-text">
                        请听下面的问题，然后通过语音回答：在完成操作后，应该进行哪些检查步骤？
                    </div>
                    
                    <!-- 问题音频 -->
                    <div class="question-audio">
                        <div class="audio-icon" onclick="playQuestion()">
                            <span id="playIcon">▶️</span>
                        </div>
                        <div class="audio-info">
                            <div class="audio-title">问题音频</div>
                            <div class="audio-status" id="audioStatus">点击播放</div>
                            <div class="audio-duration">时长: 15秒</div>
                        </div>
                    </div>
                </div>

                <!-- 答案区域 -->
                <div class="answer-section">
                    <div class="answer-label">请用语音回答：</div>
                    
                    <!-- 语音输入区域 -->
                    <div class="voice-input" id="voiceInput" onclick="startRecording()">
                        <div class="voice-icon" id="voiceIcon">🎤</div>
                        <div class="voice-text" id="voiceText">点击开始录音</div>
                        <div class="voice-hint">请清晰地说出您的答案</div>
                    </div>
                    
                    <!-- 语音识别结果 -->
                    <div class="voice-result" id="voiceResult" style="display: none;">
                        <strong>识别结果：</strong><span id="recognizedText"></span>
                    </div>
                    
                    <!-- 文本输入区域 -->
                    <div style="margin-top: 16px;">
                        <div class="answer-label">或手动输入答案：</div>
                        <textarea class="answer-input" id="textAnswer" placeholder="请输入您的答案..."></textarea>
                    </div>
                </div>

                <!-- 测验操作 -->
                <div class="quiz-actions">
                    <div class="timer" id="timer">
                        <span class="timer-icon">⏱️</span>
                        <span class="timer-text">剩余时间: 02:30</span>
                    </div>
                    
                    <div style="display: flex; gap: 12px;">
                        <button class="btn btn-default" onclick="skipQuestion()">跳过</button>
                        <button class="btn btn-primary" onclick="submitAnswer()" id="submitBtn" disabled>提交答案</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 提交确认弹窗 -->
    <div class="modal" id="submitModal">
        <div class="modal-content">
            <div class="modal-icon">❓</div>
            <div class="modal-title">确认提交</div>
            <div class="modal-text">
                您确定要提交当前答案吗？提交后将无法修改。
            </div>
            <div class="modal-actions">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="confirmSubmit()">确认提交</button>
            </div>
        </div>
    </div>

    <!-- 测验完成弹窗 -->
    <div class="modal" id="completeModal">
        <div class="modal-content">
            <div class="modal-icon">🎉</div>
            <div class="modal-title">测验完成</div>
            <div class="modal-text">
                恭喜您完成了语音问答测验！
            </div>
            
            <!-- 结果展示 -->
            <div class="result-section">
                <div class="result-title">测验结果</div>
                <div class="result-item">
                    <span class="result-label">总题数</span>
                    <span class="result-value">5题</span>
                </div>
                <div class="result-item">
                    <span class="result-label">已答题数</span>
                    <span class="result-value">5题</span>
                </div>
                <div class="result-item">
                    <span class="result-label">正确题数</span>
                    <span class="result-value success">4题</span>
                </div>
                <div class="result-item">
                    <span class="result-label">得分</span>
                    <span class="result-value success">80分</span>
                </div>
                <div class="result-item">
                    <span class="result-label">用时</span>
                    <span class="result-value">12分30秒</span>
                </div>
            </div>
            
            <div class="modal-actions">
                <button class="btn btn-default" onclick="viewDetails()">查看详情</button>
                <button class="btn btn-success" onclick="nextQuiz()">下一题</button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let isRecording = false;
        let isPlaying = false;
        let currentTime = 150; // 2分30秒
        let timerInterval = null;

        // 播放问题音频
        function playQuestion() {
            const icon = document.getElementById('playIcon');
            const status = document.getElementById('audioStatus');
            
            if (isPlaying) {
                // 停止播放
                icon.textContent = '▶️';
                status.textContent = '点击播放';
                isPlaying = false;
            } else {
                // 开始播放
                icon.textContent = '⏸️';
                status.textContent = '正在播放...';
                isPlaying = true;
                
                // 模拟播放15秒
                setTimeout(() => {
                    icon.textContent = '▶️';
                    status.textContent = '播放完成';
                    isPlaying = false;
                }, 15000);
            }
        }

        // 开始录音
        function startRecording() {
            const voiceInput = document.getElementById('voiceInput');
            const voiceIcon = document.getElementById('voiceIcon');
            const voiceText = document.getElementById('voiceText');
            const voiceResult = document.getElementById('voiceResult');
            const recognizedText = document.getElementById('recognizedText');
            
            if (isRecording) {
                // 停止录音
                voiceInput.classList.remove('recording');
                voiceIcon.textContent = '🎤';
                voiceText.textContent = '点击开始录音';
                isRecording = false;
                
                // 模拟语音识别结果
                setTimeout(() => {
                    voiceResult.style.display = 'block';
                    recognizedText.textContent = '在完成操作后，应该进行以下检查步骤：1. 检查设备状态是否正常；2. 确认所有工具已归位；3. 清理工作区域；4. 记录操作日志。';
                    enableSubmit();
                }, 1000);
            } else {
                // 开始录音
                voiceInput.classList.add('recording');
                voiceIcon.textContent = '🔴';
                voiceText.textContent = '正在录音...';
                isRecording = true;
                
                // 模拟录音过程
                setTimeout(() => {
                    startRecording(); // 自动停止录音
                }, 5000);
            }
        }

        // 启用提交按钮
        function enableSubmit() {
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = false;
        }

        // 提交答案
        function submitAnswer() {
            const textAnswer = document.getElementById('textAnswer').value;
            const recognizedText = document.getElementById('recognizedText').textContent;
            
            if (!textAnswer && !recognizedText) {
                alert('请先回答问题');
                return;
            }
            
            document.getElementById('submitModal').style.display = 'flex';
        }

        // 确认提交
        function confirmSubmit() {
            closeModal();
            
            // 模拟提交过程
            setTimeout(() => {
                document.getElementById('completeModal').style.display = 'flex';
            }, 1000);
        }

        // 跳过问题
        function skipQuestion() {
            if (confirm('确定要跳过这道题吗？')) {
                // 模拟跳转到下一题
                console.log('跳过当前问题');
            }
        }

        // 查看详情
        function viewDetails() {
            closeModal();
            console.log('查看测验详情');
        }

        // 下一题
        function nextQuiz() {
            closeModal();
            console.log('进入下一题');
        }

        // 弹窗控制
        function closeModal() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.style.display = 'none';
            });
        }

        // 点击弹窗外部关闭
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeModal();
                }
            });
        });

        // 计时器
        function startTimer() {
            timerInterval = setInterval(() => {
                currentTime--;
                updateTimer();
                
                if (currentTime <= 0) {
                    clearInterval(timerInterval);
                    // 自动提交
                    submitAnswer();
                }
            }, 1000);
        }

        function updateTimer() {
            const timer = document.getElementById('timer');
            const minutes = Math.floor(currentTime / 60);
            const seconds = currentTime % 60;
            const timeText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            timer.querySelector('.timer-text').textContent = `剩余时间: ${timeText}`;
            
            // 时间警告
            if (currentTime <= 30) {
                timer.classList.add('danger');
            } else if (currentTime <= 60) {
                timer.classList.add('warning');
            }
        }

        // 文本输入监听
        document.getElementById('textAnswer').addEventListener('input', (e) => {
            if (e.target.value.trim()) {
                enableSubmit();
            }
        });

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            startTimer();
        });
    </script>
</body>
</html>

